<!DOCTYPE html>
<html>
<head>
    <title>智能简历解析系统</title>
    <style>
        .crawler-box {
            padding: 20px;
            background: #f5f5f5;
            margin-bottom: 30px;
        }
        .crawled-mode {
            border-left: 5px solid #4CAF50;
            padding-left: 15px;
        }
        .resume-section {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <!-- 爬虫功能输入框 -->
    <div class="crawler-box">
        <h2>简历爬取工具</h2>
        <form id="crawlForm">
            <input type="url" name="url" placeholder="输入简历网址" required style="width: 300px; padding: 8px;">
            <button type="submit" style="padding: 8px 15px;">爬取简历</button>
            {% if is_crawled %}
            <button type="button" onclick="resetResume()" style="padding: 8px 15px; margin-left: 10px;">显示我的简历</button>
            {% endif %}
        </form>
        <p id="message" style="color: red;"></p>
    </div>

    <!-- 简历展示区 -->
    <div class="resume-container {% if is_crawled %}crawled-mode{% endif %}">
        <h1>{{ resume.basic_info.name }}</h1>
        <img src="{{ resume.basic_info.photo }}" alt="个人照片" class="profile-img">
        <p><strong>{{ resume.basic_info.job_intention }}</strong></p>
        
        <!-- 联系方式 -->
        <div class="resume-section">
            <h2>联系方式</h2>
            <p>电话: {{ resume.basic_info.contact.phone }}</p>
            <p>邮箱: {{ resume.basic_info.contact.email }}</p>
            <p>Gitee: <a href="{{ resume.basic_info.contact.gitee }}" target="_blank">{{ resume.basic_info.contact.gitee }}</a></p>
        </div>
        
        <!-- 教育背景 -->
        <div class="resume-section">
            <h2>教育背景</h2>
            {% for edu in resume.education %}
            <p><strong>{{ edu.school }}</strong> - {{ edu.period }}</p>
            <p>{{ edu.courses }}</p>
            {% endfor %}
        </div>
        
        <!-- 技能专长 -->
        <div class="resume-section">
            <h2>技能专长</h2>
            <ul>
                {% for skill in resume.skills %}
                <li>{{ skill }}</li>
                {% endfor %}
            </ul>
        </div>
        
        <!-- 项目经验 -->
        <div class="resume-section">
            <h2>项目经验</h2>
            {% for project in resume.projects %}
            <div style="margin-bottom: 20px;">
                <h3>{{ project.name }}</h3>
                <p><strong>项目时间:</strong> {{ project.period }}</p>
                <p><strong>项目描述:</strong> {{ project.description }}</p>
                <p><strong>个人职责:</strong> {{ project.responsibility }}</p>
                <p><strong>技术栈:</strong> {{ project.tech_stack }}</p>
            </div>
            {% endfor %}
        </div>
        
        <!-- 获奖情况 -->
        <div class="resume-section">
            <h2>获奖情况</h2>
            <ul>
                {% for award in resume.awards %}
                <li>{{ award }}</li>
                {% endfor %}
            </ul>
        </div>
        
        <!-- 自我评价 -->
        <div class="resume-section">
            <h2>自我评价</h2>
            <p>{{ resume.self_evaluation }}</p>
        </div>
    </div>

    <script>
        // AJAX提交爬取请求
        document.getElementById('crawlForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const messageEl = document.getElementById('message');
            messageEl.textContent = '正在爬取...';
            
            try {
                const formData = new FormData(e.target);
                const response = await fetch('/crawl', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                if (result.success) {
                    window.location.href = result.redirect;  // 跳转回首页
                } else {
                    messageEl.textContent = '爬取失败: ' + (result.error || '未知错误');
                }
            } catch (error) {
                messageEl.textContent = '请求失败: ' + error.message;
                console.error('Error:', error);
            }
        });
        
        // 重置显示我的简历
        function resetResume() {
            fetch('/reset', { method: 'POST' })
                .then(() => window.location.href = '/')
                .catch(err => console.error(err));
        }
    </script>
</body>
</html>